import React, { useEffect, useRef, useState } from "react"

type User = {
  name: string,
  age: number
}

interface testUser {
  className: string,
  title: string
}

type typetestUser = {
  className: string,
  title?: string
}

//定义约束
type Prosxx = {
  className: string,
  children: React.ReactNode   //名称需要固定
}

//定义约束
type PropsFunc = {
  onGetMsg?: (msg: string) => void
}

function App() {

  // -------------------------------------------------------------------------------------------------------------- useState 初始化使用 分割线
  // const [value, toggle] = useState(true)

  // const [list, setList] = useState([1, 2, 3])

  // //useState 本身是一个泛型函数，可以传入具体的自定义类型
  // //const [user, setUser] = useState<User>({ name: '123', age: 12 })
  // const [user, setUser] = useState<User>(() => ({ name: '123', age: 12 }))


  //undefined
  // const [user, setUser] = useState<User>()

  // const changeUser = () => {

  //   setUser(() => ({ name: '123', age: 12 }))
  //   //setUser({ name: '123', age: 12 })


  //   //undefined
  //   // setUser(undefined)
  // }


  //具体不知道数据类型是什么
  //useState 初始化使用 
  //定义约束
  const [user, setUser] = useState<User | null>(null)

  //useState 初始化使用 
  const changeUser = () => {
    setUser(null)
    setUser({
      name: 'jack',
      age: 10
    })
  }



  //--------------------------------------------------------------------------------------------------------------- prop与ts的基础使用 分割线
  //定义约束
  function Button(pros: typetestUser) {
    return <button className={pros.className}>click me</button>
  }


  //--------------------------------------------------------------------------------------------------------------- prop 与 ts - 特殊的children属性 类似于插槽 分割线
  //定义约束
  function Button2(pros: Prosxx) {
    const { className, children } = pros
    return <>
      <button className={className}>Button2 click me </button>
      {children}
    </>
  }

  //---------------------------------------------------------------------------------------------------------------- prop 与 ts - 为事件prop添加类型 分割线
  //定义约束
  function Button3(pros: PropsFunc) {
    const { onGetMsg } = pros

    const clickHandle = () => {
      onGetMsg?.("this is msg")
    }

    return <>
      <button onClick={() => clickHandle()}>Button3 click me </button>
    </>
  }

  const getmsgHandle = (msg: string) => {
    console.log(msg)
  }



  //---------------------------------------------------------------------------------------------------------------- useRef 与 ts 的使用 获取dom 分割线
  const domRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    domRef.current?.focus()
  }, [])

  function RefApp() {
    const timerRef = useRef<number | undefined>(undefined)

    useEffect(() => {
      timerRef.current = setInterval(() => {
        console.log(1, 'this Ref App')
      }, 1000);

      //返回一个函数 组件销毁时会执行该函数，可以清除副作用，清除定时器
      return () => clearInterval(timerRef.current)
    }, [])

    return <>this Ref App</>
  }

  const [isshow, setishsow] = useState(true)


  return (
    <>

      {/* useState 初始化使用 */}
      <div>
        this is app
        < div > {user?.age}</div >
      </div >
      <hr></hr>

      {/* prop与ts的基础使用 */}
      <div>
        <Button className="xxxx" />
      </div>
      <hr></hr>

      {/* prop 与 ts - 特殊的children属性 类似于插槽 */}
      <div>
        <Button2 className="xxww">click me xxxxxx</Button2>
        <Button2 className="xxww"><h3>click me xxxxxx</h3></Button2>
      </div>
      <hr></hr>

      {/* prop 与 ts - 为事件prop添加类型 */}
      <div>
        <Button3 onGetMsg={(msg) => console.log(msg)} />
        <Button3 onGetMsg={getmsgHandle} />
      </div>
      {/* useRef 与 ts 的使用 获取dom */}
      <hr />
      <div>
        <input ref={domRef} />
        <button onClick={()=> setishsow(!isshow)}>is show</button>
        {isshow && <RefApp />}
      </div>
    </>
  )
}

export default App
